<template>
  <div>
<!--    <NavBar />-->
    <div class="main-content">
      <el-menu router class="menu-container">
        <el-menu-item index="/course/studentCourses" class="menu-item link">
          <img src="@/assets/images/course/img.png" alt="学生图标" class="menu-icon" />
          学生自主学习
        </el-menu-item>
        <el-menu-item index="/course/teacherCourses" class="menu-item">
          <img src="@/assets/images/course/img_1.png" alt="教师图标" class="menu-icon" />
          教师备课授课
        </el-menu-item>

      </el-menu>
      <router-view /> <!-- 用于渲染子路由内容 -->

    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";

export default {
  components: {
    NavBar,
  },
};
</script>

<style scoped>
.main-content {
  background-color: #EFF2F9;
}

.menu-container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 菜单项水平空间分配 */
  border-radius: 10px; /* 圆角 */
  align-items: center; /* 垂直居中对齐 */
}

.menu-item {
  flex: 1; /* 每个菜单项占据相等的空间 */
  display: flex; /* 使菜单项内部也使用 Flexbox */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  padding: 10px; /* 添加内边距 */
  text-align: center; /* 文本居中 */
  background-color: #ffffff; /* 初始背景色 */
  cursor: pointer; /* 鼠标为手型，提示可点击 */
  font-weight: bold; /* 字体加粗 */
  transition: background-color 0.3s; /* 背景色变化动画 */
  border-radius: 10px; /* 设置圆角 */
}

.menu-icon {
  width: 24px; /* 设置图标宽度 */
  height: 24px; /* 设置图标高度 */
  margin-right: 10px; /* 图标与文本间的间距 */
}

.link {
  text-decoration: none; /* 去掉链接下划线 */
  color: inherit; /* 继承父元素的颜色 */
}

.menu-item.is-active {
  background-color: #ffffff; /* 活动菜单项的背景颜色 */
  color: #007bff; /* 活动菜单项的文字颜色 */
  border-radius: 10px; /* 圆角 */
}
</style>
